<template>
    <div>
        <Navbar></Navbar>
        app
        <Home v-if="whichTitle==='首页'"></Home>
        <List v-else-if="whichTitle==='列表'"></List>
        <Center v-else></Center>
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Navbar from './Navbar.vue'
import Tabbar from './Tabbar.vue'
import Center from './views/Center.vue';
import Home from './views/Home.vue';
import List from './views/List.vue';

export default {
    components:{
        Navbar,
        Tabbar,
        Home,
        Center,
        List
    },
    //使用provide和inject实现跨级传值
    provide(){
        return{
            navTitle:this.navTitle,  //将navTitle的值传递给组件（不具备响应式）
            app:this                 //将整个App.vue的值传递给组件 （具备响应式）
        }
    },
    data(){
        return{
            navTitle:'首页',
            whichTitle:'首页'
        }
    },
    
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}
</style>